<template>
  <div id="single-page">
    <v-card flat>
      <v-card-text>
        <p class="display-1 text-xs-center my-3">{{ article.title}}</p>
        <p class="text-xs-center grey--text">
          创建于{{ article.created_at }}&nbsp;/&nbsp;
          <v-icon small>far fa-eye</v-icon>&nbsp;123&nbsp;/&nbsp;
          <v-icon small>far fa-comments</v-icon>
          &nbsp;123&nbsp;/&nbsp;
          更新于{{ article.updated_at }}&nbsp;
        </p>
        <div class="hr-line-dashed my-3"></div>
        <div class="content markdown-body text-wrap" v-html="article.content"></div>
        <div class="hr-line-dashed my-3"></div>
      </v-card-text>
    </v-card>
    <v-card class="mt-3" flat>
      <v-card-text>
        <p class="title text-xs-center my-3">
          <v-icon>fas fa-comments</v-icon>&nbsp;评论留言
        </p>
        <div class="hr-line-dashed my-3"></div>
        <v-layout>
          <v-flex>
            <div id="gitalk-container"></div>
          </v-flex>
        </v-layout>
      </v-card-text>
    </v-card>
  </div>
</template>
<script>
import request from '@/utils/request'
import 'gitalk/dist/gitalk.css'
import Gitalk from 'gitalk'
import gitalk_config from '@/utils/gitalk'
import Util from '@/utils'
export default {
  name: 'page',
  data: () => ({
    article: [],
    gitalk: new Gitalk(gitalk_config)
  }),
  methods: {
    init(id) {
      request.get('/posts').then(res => {
        this.article = res.data.posts[id - 1]
        console.log(res.data.posts[id - 1])
      })
    }
  },
  created() {
    Util.markTitle('关于站点')
    this.article.title = '关于站点'
    this.article.created_at = '三年前'
    this.article.updated_at = '昨天'
    this.article.content = `<h2>关于本博客</h2><ul><li>本站由使用PHP开发的Laravel5框架二次开发而成，源码托管在码云上。</li><li>需要合作请联系本人 。</li><li>联系方式：菜单栏里的邮件投稿或者关注我的微博。</li></ul><hr><h2>本站资源免责声明:</h2><p>本站所有资源来自互联网，仅供免费下载使用及学习，不得用于任何商业用途。全部内容采用撰写共用版权协议，要求署名、非商业用途和相同方式共享，如转载请也遵循撰写共用协议。</p><p>根据 <a href="https://creativecommons.org/licenses/by-nc/4.0/">CC BY-NC 4.0 许可协议</a> 规定，只要他人在以原作品为基础创作的新作品上适用同一类型的许可协议，并且在新作品发布的显著位置，注明原作者的姓名、来源及其采用的知识共享协议，与该作品在本网站的原发地址建立链接，他人就可基于非商业目的对原作品重新编排、修改、节选或者本人的作品为基础进行创作和发布。基于原作品创作的所有新作品都要适用同一类型的许可协议，因此适用该项协议， 对任何以他人原作为基础创作的作品自然同样都不得商业性用途。</p><p>提供的所有软件版权归原公司所有，仅供日常使用不得用于任何商业用途，下载试用后请24小时内删除，因下载本站资源造成的损失，全部由使用者本人承担！如果您发现本站侵害了相关版权，请联系站长并出示版权证明。</p>`
  },
  mounted() {
    this.gitalk.render('gitalk-container')
    // console.log(window.location.href)
  }
}
</script>

